<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <video id="myVideo" :src="src" style="width: 100%;"
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
            </view>
            <!-- #ifndef MP-ALIPAY -->
            <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view style="padding: 10rpx;">
                        <view class="uni-label">交个朋友,发个友善的弹幕</view>
                    </view>
                    <view class="uni-list-cell-db" style="display: flex;">
                        
						<uni-easyinput v-model="danmuValue" :styles="styles" placeholder="发个友善的弹幕见证当下"></uni-easyinput>
						<view class="uni-btn-v">
						    <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
						</view>
                    </view>
                </view>
            </view>
            
            <!-- #endif -->
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            src: '',
            danmuList: [{
                    text: '亲子课的内容非常丰富',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '和孩子共同成长的快乐',
                    color: '#ff00ff',
                    time: 3
                },
				{
				    text: '孩子和我一起准备道具和布景',
				    color: '#30efff',
				    time: 4
				},
				{
				    text: '明白了只有通过互相尊重和理解',
				    color: '#1d82fe',
				    time: 5
				}
            ],
            danmuValue: ''
        }
    },
    onReady: function(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
        // #endif
    },
    methods: {
        sendDanmu: function() {
            this.videoContext.sendDanmu({
                text: this.danmuValue,
                color: this.getRandomColor()
            });
            this.danmuValue = '';
        },
        videoErrorCallback: function(e) {
            uni.showModal({
                content: e.target.errMsg,
                showCancel: false
            })
        },
        getRandomColor: function() {
            const rgb = []
            for (let i = 0; i < 3; ++i) {
                let color = Math.floor(Math.random() * 256).toString(16)
                color = color.length == 1 ? '0' + color : color
                rgb.push(color)
            }
            return '#' + rgb.join('')
        }
    },
	onLoad(e) {
		console.log(e.videourl);
		this.src = "https://zyc618.mynatapp.cc" + e.videourl
	}
}
</script>
<style lang="scss">
	
	.uni-list-cell-db{
		
		
	}
	.uni-btn-v{
		
		.page-body-button{
			height: 100%;
			background-color: #d2507e;
			color: #FFF;
			font-size: 28rpx;
		}
	}
</style>

